<template>
    <div>
        <el-card>
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
                <el-breadcrumb-item>系统管理</el-breadcrumb-item>
                <el-breadcrumb-item>成为推广员</el-breadcrumb-item>
            </el-breadcrumb>
            <div class="btnBox">
                <div>
                    <el-button size="small" icon="el-icon-plus">添加</el-button>
                </div>
            </div>
            <el-table :data="tableData" border style="width: 100%" height="626">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column prop="product_id" label="编号" width="60"></el-table-column>
                <el-table-column label="图片" width="122">
                    <template slot-scope="prop">
                        <el-image :src="baseurl + 'product/product_' + prop.row.product_id + '/' + prop.row.product_pic"
                            class="image-control" :previewSrcList="[
                    baseurl + 'product/product_' + prop.row.product_id + '/' + prop.row.product_pic
                ]"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="product_name" label="品名"></el-table-column>
                <el-table-column label="状态" width="80">
                    <template slot-scope="scope">
                        <el-tag size="small" v-if="scope.row.product_status == '1'">销售中</el-tag>
                        <el-tag size="small" type="warning" v-else-if="scope.row.product_status == '0'">仅展示</el-tag>
                        <el-tag size="small" type="info" v-else-if="scope.row.product_status == '2'">已下架</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="small" icon="el-icon-edit" @click="detailHandle(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <div class="paginationBox">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                    :current-page="pageNum" :page-sizes="[50, 100, 200]" :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper" :total="totalNum"></el-pagination>
            </div>

        </el-card>


        <!-- 添加弹窗 -->
        <el-dialog title="添加" :visible.sync="addialogVisible" width="630px" :before-close="closeAddDialog">

            <span slot="footer" class="dialog-footer">
                <el-button @click="closeAddDialog">取 消</el-button>
                <el-button type="primary" @click="submitAddDialog">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
let that
export default {
    data() {
        return {
            tableData: [],
            pageSize: 50,
            pageNum: 1,
            totalNum: 0,
            addialogVisible: false,//弹窗
        };
    },
    methods: {
        detailHandle(obj) {
            console.log(obj);
        },

        submitAddDialog() {
            this.addialogVisible = false
        },
        // 关闭弹窗
        closeAddDialog() {
            this.addialogVisible = false
        },
        handleSizeChange(val) {
            this.pageSize = val;
        },
        handleCurrentChange(val) {
            this.currentPage = val;
        },

    },
    created() {

    },
    filters: {

    },
};
</script>

<style scoped></style>